<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>未来音乐</title>
<!--    <link rel="stylesheet" th:href="@{/static/ypb/Y-css/Y-item/comment.css}"/>-->
    <link rel="stylesheet" th:href="@{/static/ypb/Y-css/Y-item/comment.css}" href="../../Y-css/Y-item/comment.css" type="text/css"/>
    <link rel="stylesheet" th:href="@{/static/ypb/Y-commentTubiao/iconfont.css}" href="../../Y-commentTubiao/iconfont.css" type="text/css">
    <link rel="stylesheet" th:href="@{/static/ypb/Y-yubiao/iconfont.css}" href="../../Y-yubiao/iconfont.css" type="text/css">
</head>
<body>
<div class="header">
    <div class="kMusic">
        <img th:src="@{/static/L-img/L-image/future1.jpg}"/>
    </div>
    <ul class="manya">
        <li><a th:href="@{/}">发现音乐</a></li>
        <li><a class="vipBtn">VIP会员</a></li>
        <li><a class="myMusic">我的音乐</a></li>

    </ul>
    <!-- 搜索和登录注册 -->
    <div class="right">
        <div class="headCenter">
            <div class="headCenterSearch">
                <form th:action="@{/music/queryByNameMusic}" method="get" class="seekForm" id="seekGoodsForm">
                    <input id="goSearch" autocomplete="off" type="text" name="queryMusicName" placeholder="搜索歌手/歌单/MV/歌词" />
                    <input type="submit" id="actSearch" value="搜索"/>
                </form>
            </div>
        </div>
        <div class="login">
            <a th:href="@{/loginpage}">登录</a>
        </div>
        <div class="persons" >
            <span>欢迎</span>
            <block th:if="${session.USER}!=null">
                <span class="userName" th:text="${session.USER.userName}">用户名</span>
            </block>

            <span class="out">退出登录</span>
        </div>
    </div>
</div><!--内容区-->
<div class="bContent">
    <!-- 内容区中的歌曲展现部分-->
    <div class="content">
        <div class="singHead">
            <span class="photo">
                <img th:src="${AlbumMusic.albImgload}" class="data_photo">
            </span>
            <div class="nameRight">
                <h1 class="data_name" th:text="${AlbumMusic.mcName}"  id="MCID" th:attr="mcId=${AlbumMusic.mcId}"></h1>
            </div>
            <div class="singer" >
                <i class="iconfont icon-yonghu"></i>
                <a class="singerName" th:text="${AlbumMusic.userName}" href="#">温屿</a>
            </div>
            <div class="introduce">
<!--                <p class="relevant">专辑：<a href="#" class="album">吹呀吹</a> </p>-->
<!--                <p class="relevant rele_1">类型：<a href="#" class="album">国语</a> </p>-->
                <ul class="relevant" >
                    <li class="abstract">专辑：<span class="album" th:text="${AlbumMusic.albName}">吹呀吹</span></li>
                    <li class="abstract">类型：<span class="album" th:text="${AlbumMusic.albType}">摇滚</span></li>
                </ul>
                <ul class="relevant-1" >
                    <li class="abstract-1">语种：<span class="album" th:text="${AlbumMusic.albLanguage}"></span></li>
                    <li class="abstract-1">发行时间：<span th:text="${AlbumMusic.albTime}">2021-05-08</span></li>
                </ul>
            </div>
            <div style="clear: both"></div>
            <div class="buttonA">
                <a class="btn Btn_1"><i class="iconfont icon-shoucang"></i><span class="collect">收藏</span></a>
                <a th:href="@{/music/addMusicToDownlist(mcName=${Music.mcName},mcLoaddele=${Music.mcLoaddele}) }" class="btn"><i class="iconfont icon-xiazai"></i>下载</a>

            </div>
        </div>
    </div>
    <div style="clear: both"></div>
<!--   发表评论-->
    <div class="mainComment">
        <div class="titleComent">
            <h2>评论<span class="total">
                共<span th:value="${total}"></span>条评论
                <input class="usId" th:value="${Music.mcId}" style="display: none"></input>
            </span></h2>
        </div>
        <div id="text-container" class="text" th:each="music,loopStatus:${Music}">
            <textarea class="frame" placeholder="说说你的看法吧"></textarea>
            <button class="send">发表评论</button>
        </div>
    </div>
<!--    精彩评论-->
    <div class="wonderful">
        <h4 class="wonComm">精彩评论</h4>
        <div class="wondContent" th:each="dis,loopStatus:${Dis}">
            <div class="headPhoto" >
                <img class="hPhoto" th:src="${dis.userImgload}">
            </div>
            <h4 class="comment_title" th:text="${dis.userName}">风水大师赛半仙</h4>
            <span class="this_text" th:text="${dis.dis_time}">5月13日 12：40</span>
            <p class="content_text" th:text="${dis.dis_content}">总习惯三点前后买一杯咖啡 熟悉的香味 苦和甘形容暧昧 麻醉味蕾 温柔回味 随落寞颓废 如果说还有什么不愿沉睡 支离破碎 只剩一颗真心无畏 折下一支热烈盛放玫瑰随时为你浪漫准备
                哇，又发现了一首和我胃口的歌！真不错经年痴心妄想，一时走火入魔。总在不经意的年生，回首彼岸，纵然发现光景绵长。你是藏在云层里的月亮 也是我穷极一生寻找的宝藏</p>
            <div class="content_function">
                <i class="iconfont icon-zan zan"></i>
                <a class="apply">回复</a>
            </div>
            <div class="huiFu" style="display: none">
            <textarea class="frame_1" placeholder="说说你的看法吧"></textarea>
            <button class="replay">回复</button>
            <button class="frameCancle">取消</button>
            </div>
            <a class="look">查看<span></span>条评论
            <i class="iconfont icon-down" style="display: block"></i>
                <i class="iconfont icon-jiantouxiangshang" style="display: none"></i>
            </a>
            <div class="lookComment" style="display:none;">
                <div class="headPhoto">
                    <img class="hPhoto" src="#">
                </div>
                <h4 class="comment_title">风水大师赛半仙</h4>
                <span class="this_text">5月13日 12：40</span>
                <p class="content_text">总习惯三点前后买一杯咖啡 熟悉的香味 苦和甘形容暧昧 麻醉味蕾 温柔回味 随落寞颓废 如果说还有什么不愿沉睡 支离破碎 只剩一颗真心无畏 折下一支热烈盛放玫瑰随时为你浪漫准备
                    哇，又发现了一首和我胃口的歌！真不错经年痴心妄想，一时走火入魔。总在不经意的年生，回首彼岸，纵然发现光景绵长。你是藏在云层里的月亮 也是我穷极一生寻找的宝藏</p>
                <div class="content_function">
                    <i class="iconfont icon-zan zan"></i>
                    <a class="apply">回复</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--尾部的黑框-->
<div class="black">
    <ul class="logo">
        <li><a href="javascript:;">用户服务协议</a>&lt;&gt;
        </li><li>隐私政策&lt;&gt;
        </li><li>权利声明&lt;&gt;
        </li><li>联系我们&lt;&gt;
        </li><li>广告服务&lt;&gt;
    </li></ul>
</div>
<div class="foot">
    <p>抛开忙碌，远离喧嚣，进入这里，你会发现生活是多么的缤纷多彩 欢迎加入我们</p>
    <p>Copyright  2001 - 2021 Tencent. All Rights Reserved.</p>
    <p>未来公司 版权所有 QQ:911662779</p>
</div>
<!--置顶-->
<div class="stick" style="display:block;">
    <i class="iconfont icon-zhiding"></i>
</div>

</body>

<script th:src="@{/static/ypb/Y-js/Y-item/comment.js}" type="text/javascript"></script>
<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js}"></script>


</html>